<template>
  <view class="search">
    <input type="text" v-model="value" :focus='focusState' @change="$emit('change')" @blur="focusState = false" />
    <view class="tip" v-if="!value" @click="focusState = true">
      <image src="@/static/icons/search.png"></image>
      <span>{{ props.customPlaceholder }}</span>
    </view>
  </view>
</template>
<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
  modelValue: String,
  customPlaceholder: {
    type: String,
    default: "搜索"
  }
})
const emit = defineEmits(['update:modelValue', 'change'])
const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const focusState = ref(false)
</script>
<style lang="scss" scoped>
.search {
  position: relative;

  input {
    height: 88rpx;
    border-radius: 22rpx 22rpx 22rpx 22rpx;
    background: #F5F5F5;
    padding: 0 26rpx;
  }

  .tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;

    image {
      width: 44rpx;
      height: 44rpx;
      margin-right: 12rpx;
    }

    font-weight: 500;
    font-size: 30rpx;
    color: #999999;
    line-height: 35rpx;
  }
}
</style>